Instituto Federal de São Paulo (IFSP)
Campus Bragança Paulista/SP

Análise e Desenvolvimento de Sistemas (ADS)

5o. módulo
Profa. Ana Paula Müller Giancoli
paulagiancoli@ifsp.edu.br


AULA 12 - APIs HTML E FERRAMENTAS ÚTEIS PARA DESENVOLVIMENTO

Agenda

1. APIs HTML

1.1. File API - Imagens

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Utilizando Arquivos</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <div id="container">
    <h2>Selecionando arquivos - File API</h2>
    <p>Pressione o botão e selecione os arquivos de imagens desejados:
      <label for="arquivo">Selecionar arquivos</label>
      <input hidden type="file" name="arquivo" id="arquivo" multiple onchange="exibir(this.files);">
    </p>
    <div>
      <h4>Miniaturas</h4>
      <span id="miniatura"></span>
    </div>
  </div>

  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
#container {
  margin: 20px;
  padding: 10px;
}
img {
  padding: 10px;
  border: 2px solid darkred;
  margin: 10px;
}

label {
  background-color: #3498db;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin: 10px;
  padding: 6px 20px;
}
/* Arquivo js.js */
let container = document.getElementById("miniatura");

function exibir(files) {
  for (let i=0; i < files.length; i++) {
     let f = files[i];
     let leitor = new FileReader();
     leitor.onload = function(e) {
          let img = document.createElement("img");
          img.src = e.target.result;
          img.width = 100;
          container.appendChild(img);
    };
    leitor.readAsDataURL(f);
  }

}

Saída:

1.2. File API - Leitura

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>Utilizando Arquivos</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <div id="container">
        <h2>Lendo arquivos Textos ou PDF- File API</h2>
        <p>Pressione o botão e selecione os arquivos de imagens desejados:
          <label for="arquivo">Selecionar arquivos</label>
          <input hidden type="file" name="arquivo" id="arquivo" multiple onchange="exibir(this.files);">
        </p>
        <div>
          <h4>Conteúdo</h4>
          <textarea wrap="soft" cols="50" id="conteudo"></textarea>
        </div>
    </div>

    <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
#container {
  margin: 20px;
  padding: 10px;
}
img {
  padding: 10px;
  border: 2px solid darkred;
  margin: 10px;
}

label {
  background-color: #3498db;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin: 10px;
  padding: 6px 20px;
}
textarea {
  height: 500px;
}
/* Arquivo js.js */
let arquivosConteudo = document.getElementById("conteudo");

function exibir(files) {
    console.log("Exibir arquivos");
    for (let i = 0, f; f = files[i]; i++) {
            let leitor = new FileReader();
            // Adicionar o evento para a Leitura
            addLeitura(leitor, f.name);
            // Efetuando Leitura
            leitor.readAsText(f);
        }
    }

    function addLeitura(leitor, name) {
        leitor.onload = function(e) {
            arquivosConteudo.value += "*** Lendo arquivo " + name + " ***";
            arquivosConteudo.value += e.target.result;
        };
    }

Saída:

1.3. File API - Informações do Arquivo (metadados)

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>Utilizando Arquivos</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <div id="container">
      <h2>Lendo Informações (metadados) - File API</h2>
      <p>Pressione o botão e selecione o arquivo para obter as informações desejadas:
        <label for="arquivo">Selecionar arquivos</label>
        <input hidden type="file" name="arquivo" id="arquivo" multiple onchange="informacoes();">
      </p>
      <div>
        <h4>Informações do Arquivo</h4>
        <div>
          <ul>
            <li>Nome: <span id="nome"></span></li>
            <li>Tamanho: <span id="tamanho"></span></li>
            <li>Tipo: <span id="tipo"></span></li>
            <li>Data última modificação: <span id="datainfo"></span></li>
          </ul>
        </div>
      </div>
    </div>
    <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
#container {
  margin: 20px;
  padding: 10px;
}
img {
  padding: 10px;
  border: 2px solid darkred;
  margin: 10px;
}
label {
  background-color: #3498db;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin: 10px;
  padding: 6px 20px;
}
h4, h2 {
  color: #0D47A1;
}
/* Arquivo js.js */
function informacoes() {
      let selecao = document.getElementById('arquivo').files[0];
      document.querySelector("#nome").innerHTML = selecao.name;
      document.querySelector("#tamanho").innerHTML = selecao.size + "  bytes";
      document.querySelector("#tipo").innerHTML = selecao.type;
      document.querySelector("#datainfo").innerHTML = selecao.lastModifiedDate;
}

Saída:

2. Local Storage

2.1. Local Storage com Console

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>Local Storage</title>
</head>
<body>
    <h6> Veja o console log. </h6>

    <script>
    // Dados salvos
    localStorage.ultimoNome = "Giancoli";
    localStorage.primeiroNome = "Ana";
    localStorage.cidade = "Bragança Paulista";

    // Dados recuperados
    let ultimoNome = localStorage.ultimoNome;
    let primeiroNome = localStorage.primeiroNome;
    let cidade = localStorage.cidade;

    console.log("Informações recuperadas do Local Storage ");
    console.log(primeiroNome);
    console.log(ultimoNome);
    console.log(cidade);
    </script>
</body>
</html>

2.2. Local Storage com Formulário

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>Form example</title>
  <style>
    fieldset {
      padding: 10px;
      border-radius: 10px;
    }
    h2 {
      color: #0D47A1;
    }
    legend {
      background-color: #3498db;
      padding: 10px;
      border-radius: 2em;
      border: 2px solid #2e6da4;
    }

    label, button {
      background-color: #3498db;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
      margin: 10px;
      padding: 6px 20px;
      display: inline-block;
      width: 100px;
    }
    input {
      float: right;
      margin-right: 70px;
      width: 200px;
    }
    input:invalid {
      background-color: pink;
    }
    input:valid {
      background-color: lightskyblue;
    }
  </style>
</head>
<body>
  <h2>Entre com os valores e recarregue a qualquer hora.</h2>
  <form action="" method="POST" autocomplete="off">
      <fieldset>
        <legend>Informações pessoais</legend>
        <label for="primeiroNome">Primeiro nome:</label>
        <input type="text" id="primeiroNome" required name="primeiroNome">
        <br>
        <label for="ultimoNome">Sobrenome:</label>
        <input type="text" id="ultimoNome" required name="ultimoNome">
        <br>
        <label for="email">E-mail:</label>
        <input type="email" id="email" required name="email">
        <br>
        <label for="idade">Idade:</label>
        <input type="number" min=0 max=120  step=5 id="age" required name="idade">
        <br>
        <label for="data">Aniversário:</label>
        <input type="date"  id="data" required name="data">
      </fieldset>
      <button>Enviar</button>
  </form>
<script>
    function enviarForm() {
      console.log("Enviando.....");
      return false;
    }

    /* Chamando a função para carregar automaticamente ao abrir a página */
    window.onload = init;

    function init() {
      console.log("Adding input listener to all input fields");
      // Evento aguardando inserção no formulário
      let listaItens = document.querySelectorAll("input");
      for(let i= 0; i < listaItens.length; i++) {
         addItens(listaItens[i]);
      }
      // Recuperando valores salvos no Local Storage
      restoreFormContent();
    }

    function addItens(entrada) {
        entrada.oninput = function(event) {
          localStorage.setItem(entrada.id, entrada.value);
        };
    }

    function restoreFormContent() {
      console.log("Recuperando dados do Local Storage...");
      //Recuperando a lista de itens salvos
      let listaItens = document.querySelectorAll("input");
      for ( let i= 0; i < listaItens.length; i++) {
          let campoRecup = listaItens[i];
          let id = campoRecup.id;
          let valorSalvo = localStorage.getItem(id);

          if(valorSalvo !== undefined) {
            campoRecup.value = valorSalvo;
          }
      }
    }
</script>
</body>
</html>

Saída:

3. Ferramentas úteis de desenvolvimento

3.1. Gulp

3.2. Grunt

3.3. Git

Guia

3.4. Github

3.5. Markdown

Guia 1

.

.

Guia 2

.

.

3.6. Gimp

3.7. Chrome DevTools

3.8. Lighthouse e PageSpeed

3.9. Minifier

3.10. Heroku

3.11. Metodologia BEM (CSS-in-JS)

3.12. Service Workers

3.13. Subindo seu projeto Front-End gratuitamente com Github Pages

3.14 Amazon S3

Referências

Perguntas


ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.

</div> </div>